<template>
  <!-- 资讯评论审核 -->
  <div class="infoReview">

    <!-- 批量删除 -->
    <el-button type="danger" @click="inbatchDelete">批量删除</el-button>

    <!-- 关键字 -->
    <el-input v-model="queryForm.keywords" placeholder="请输入关键字" clearable />

    <!-- 查询 -->
    <el-button type="primary" @click="inpageQuery">查询</el-button>

    <!-- 表格 -->
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="comment" label="评论内容" />
      <el-table-column label="评论人编号">
        <template slot-scope="scope">{{ scope.row.baseUser == null ? '': scope.row.baseUser.id }}</template>
      </el-table-column>

      <el-table-column prop="articleId" label="资讯编号" show-overflow-tooltip />
      <el-table-column prop="commentTime" label="评论时间" show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.commentTime }}</template>
      </el-table-column>

      <el-table-column prop="status" label="评论状态" show-overflow-tooltip>
        <template v-if="scope.row.status" slot-scope="scope">
          <el-tag :type="(scope.row.status == null) ? '' :( (scope.row.status == '未审核') ? 'info' : (scope.row.status == '通过'? 'success' : 'danger') )">{{ scope.row.status == null ? '' :scope.row.status }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" show-overflow-tooltip>
        <template v-if="scope.row.status!=null" slot-scope="scope">
          <el-link type="warning" :underline="false" @click="indeleteById(scope.row.id)">删除</el-link>
          <span v-show="scope.row.status == null ? false : (scope.row.status == '未审核')">
            <el-link type="primary" :underline="false" @click="checkIsPass(scope.row, '通过')">通过</el-link>
            <el-link type="danger" :underline="false" @click="checkIsPass(scope.row, '不通过')">不通过</el-link>
          </span>

        </template>

      </el-table-column>

    </el-table>

    <!-- 分页查询 -->
    <el-pagination :current-page="queryForm.page" :page-sizes="[2, 5, 10, 15,20]" :page-size="queryForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" style="float:right;" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

  </div>
</template>

<script>
import { pageQuery, deleteById, checkPass, deleteByIdArr } from '../../../api/examine/infoReview'
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      input: '', // 关键字

      queryForm: {
        page: 1,
        pageSize: 10
      },
      total: 0,
      batchArr: []
    }
  },
  computed: {},
  created() { this.inpageQuery() },
  mounted() { },
  methods: {
    /**
       * 根据id删除
       */
    async indeleteById(id) {
      const data = await deleteById(id)
      if (data.status == 200 || data.status == '200') {
        this.$message.success(data.message)
      } else this.$message.error(data.message)
      this.inpageQuery()
    },

    /**
       * 批量删除
       */
    async inbatchDelete() {
      const data = await deleteByIdArr(this.batchArr)
      console.log(data)
      if (data.status == 200 || data.status == '200') this.$message.success(data.message)
      else this.$message.error(data.message)
      this.inpageQuery()
    },

    /**
       * 审核是否通过
       */
    async checkIsPass(item, status) {
      const data = await checkPass({ id: item.id, status })
      if (data.status == 200 || data.status == '200') this.$message.success(data.message)
      else this.$message.error(data.message)
      this.inpageQuery()
    },

    /**
       * 条件查询
       */
    async inpageQuery() {
      for (const key in this.queryForm) {
        if (this.queryForm[key] == null || this.queryForm[key] == '') this.queryForm[key] = null
      }
      const { data } = await pageQuery(this.queryForm)
      this.total = data.total
      this.tableData = data.list
    },

    /**
       * 分页相关方法
       */
    handleSizeChange(val) {
      this.queryForm.pageSize = val
      this.inpageQuery()
    },
    handleCurrentChange(val) {
      this.queryForm.page = val
      this.inpageQuery()
    },

    /**
       * 表格每列的单选框
       */

    handleSelectionChange(val) {
      this.batchArr = val.map(item => {
        return item.id
      })
    }

  }
}
</script>
<style scoped>
  .el-input,
  .el-button {
    float: left;
    margin: 0 10px;
  }
  .el-input {
    width: 200px;
  }
</style>
